<template>
	<view class="statement-window">
		<u-popup v-model="showWindow" mode="bottom" border-radius="40">
			<view class="statement-box">
				<view class="title">
					投票声明
				</view>
				<view class="userMeaasge-box">
					<view>{{detail.name}}</view>
					<view>{{detail.community}}-{{detail.building}}-{{detail.unit}}-{{detail.room}}-{{detail.area}}㎡
					</view>
				</view>
				<view class="tips">
					个人信息如果有误，请通过【意见反馈】功能进行反馈
				</view>
				<view class="statement">
					我是{{detail.community}}的业主，我自愿参与{{detail.community}}业委会组织的物业公司选聘投票活动。
				</view>
				<view class="btn-box">
					<view class="no" @tap="showWindow=false">不同意</view>
					<view class="yes" @tap="agree">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "cc-statement",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showWindow: this.show,
				detail: {
					name: '',
					community: '',
					building: '',
					unit: '',
					room: '',
					area: '',
					id: ''
				}
			};
		},
		watch: {
			showWindow(newData, oldData) {
				console.log(newData, oldData);
				this.$emit('onchange', newData);
			}
		},
		mounted() {
			this.userDetail();
		},
		methods: {
			userDetail() {
				this.$asynApi.sysUserDetail().then(res => {
					if (res.code === 200) {
						this.detail = res.data;
						// console.log(this.detail, );
					}
				})
			},
			agree() {
				this.$asynApi.userAgree(
					this.detail.id
				).then(res => {
					if (res.code === 200) {
						this.showWindow = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statement-window {
		.statement-box {
			width: 100%;
			padding: 53rpx 32rpx 64rpx;
			box-sizing: border-box;

			.title {
				text-align: center;
				font-size: 40rpx;
				font-weight: 600;
				color: #004EE8;
				line-height: 56rpx;
				margin-bottom: 27rpx;
			}

			.userMeaasge-box {
				width: 100%;
				height: auto;
				background: #F4F8FB;
				border-radius: 10rpx;
				border: 1px solid #D6D6D6;
				padding: 28rpx;
				box-sizing: border-box;
				font-size: 40rpx;
				font-weight: 600;
				color: #000000;
				line-height: 56rpx;
			}

			.tips {
				margin-top: 38rpx;
				font-size: 26rpx;
				color: #999999;
				padding: 0 28rpx;
			}

			.statement {
				padding: 0 28rpx;
				margin-top: 38rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				line-height: 42rpx;
				margin-bottom: 54rpx;
			}

			.btn-box {
				text-align: center;
				padding: 0 28rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;

				>view {
					width: 294rpx;
					height: 100rpx;
					background: #F8F8F7;
					border-radius: 22rpx;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 100rpx;
				}

				.no {
					color: #000000;
				}

				.yes {
					color: #004EE8;
				}
			}
		}
	}
</style>
